<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: mainHeight }' @scrolltoupper="" @scrolltolower="">
			<form>
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">场区名称 <text class="margin-xs text-orange">*</text></view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="50" type="text" placeholder="必填" confirm-type="search"
							v-model="farmname"></input>
					</view>
				</view>
				
				<view class="padding-left-lg padding-right-lg">
					<view class="cu-form-group ">
						<view class="title label">所属组团 <text class="margin-xs text-orange">*</text></view>
						<picker @change="areaPickerChange" :value="areaPickerIdx" :range="areaPickerData">
							<view class="picker">
								{{areaPickerIdx>-1?areaPickerData[areaPickerIdx]:''}}
							</view>
						</picker>
					</view>
				</view>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">排序号 <text class="margin-xs text-orange">*</text></view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="10" type="number" placeholder="" confirm-type="search"
							v-model="sort"></input>
					</view>
				</view>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">所属省市 <text class="margin-xs text-orange">*</text></view>
					<view class="action">
						<view @tap="cityPicker_open()" class=" text-gray padding-right-sm ">{{province}}{{city}}</view>
						<view @tap="cityPicker_open()" class="flex justify-right text-xl">
							<text class="cuIcon-location text-olive "></text>
						</view>
					</view>
				</view>
				
				
				
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">经纬度 </view>
					<view class="action">
						<view @tap="chooseLocation()" class="text-xs text-gray padding-right-sm ">{{x}}{{y}}</view>
						<view @tap="chooseLocation()" class="flex justify-right text-xl">
							<text class="cuIcon-location text-olive "></text>
						</view>
					</view>
				</view>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">联系人 </view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="50" type="text" placeholder="" confirm-type="search"
							v-model="person"></input>
					</view>
				</view>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">联系电话 </view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="50" type="number" placeholder="" confirm-type="search"
							v-model="phone"></input>
					</view>
				</view>
				
				<view class="padding-xl padding-top">
					<button @tap="onConfirm" class="cu-btn block bg-blue margin-tb-sm lg round">
						<text class=""></text> 确定</button>
				</view>
				
				<!-- <view class="padding-xl padding-top">
					<i class="cuIcon-info text-orange"></i><text class="text-grey padding-left-sm text-sm">注意:请确认填写内容的真实性,随意修改填写会平台记录。</text>
				</view> -->
				
				<cityPicker :column="cityPicker_column" 
				:default-value="cityPicker_defaultValue" 
				:mask-close-able="cityPicker_maskCloseAble" 
				@confirm="cityPicker_confirm" 
				@cancel="cityPicker_cancel" 
				:visible="cityPicker_visible"/>
								
			</form>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import * as util from '../../common/util.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	var formatLocation = util.formatLocation;
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
				title: '',
				
				hasLocation: false,
				location: {},
				locationAddress: '',
		
				area_id:'',
				farmname:'',
				sort:0,
				person:'',
				phone:'',
				province:'',
				city:'',
				x:'',
				y:'',
				address:'',
		
				areaData:[],
				areaPickerData:[],
				areaPickerIdx:0,
				
				cityPicker_visible: false,
				cityPicker_maskCloseAble: true,
				cityPicker_str: '',
				cityPicker_defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				cityPicker_column: 2
				
			}
		},
		components: {
			cityPicker
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 20 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 100 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("onShow")
			uni.setNavigationBarTitle({
				title: '新增场区'
			});
			this.loadAreas()
		},
		methods: {
			InputFocus() {
			},
			InputBlur() {
			},
			onKeyInput(){
			},
			
			cityPicker_open () {
				this.cityPicker_visible = true
			},
			cityPicker_confirm (val) {
				console.log(val)
				this.cityPicker_str = JSON.stringify(val)
				this.cityPicker_visible = false
				this.province = val.provinceName
				this.city = val.cityName
			},
			cityPicker_cancel () {
				this.cityPicker_visible = false
			},
						
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						console.info(res)
						this.hasLocation = true,
						this.location = formatLocation(res.longitude, res.latitude),
						this.locationAddress = res.address
						console.info(this.location)
						this.x = res.longitude
						this.y = res.latitude
						this.address = res.address
					}
				})
			},
			areaPickerChange:function(e){
				this.areaPickerIdx = e.detail.value
			},
			
			loadAreas(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Area',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {

						var list = res.data
						console.log(list)
						var data = []
						//that.areaPickerData = []
						for(var i=0;i<list.length;i++){
							data.push(list[i].group_name+"|"+list[i].name)
						}
						that.areaData = list
						that.areaPickerData = data
						//that.areaPickerIdx = 0
					} else {

					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},
			
			onConfirm(){
				this.area_id = this.areaData[this.areaPickerIdx].id
				if(this.area_id=="" ){
					uni.showModal({
						title: "数据缺失",
						content: "请选择所属组团",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				if(this.farmname==""){
					uni.showModal({
						title: "数据缺失",
						content: "场区名称不能为空",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				if(this.province=="" || this.city==""){
					uni.showModal({
						title: "数据缺失",
						content: "所属省市不能为空",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '提示',
					content: '请注意,本次操作将会被系统记录,是否要继续?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.saveFarm()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			saveFarm(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Farm',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: "",
						area_id: that.area_id,
						farmname:that.farmname,
						sort:that.sort,
						person:that.person,
						phone:that.phone,
						province:that.province,
						city:that.city,
						x:that.x,
						y:that.y,
						address:that.address,
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						uni.navigateBack()
					} else {
						uni.showModal({
							title: "错误",
							content: res.msg,
							showCancel: false,
							confirmText: "确定"
						})
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.title {
	    text-align: justify;
	    padding-right: 16px;
	    font-size: 16px;
	    position: relative;
	    height: 33px;
	    line-height: 33px;
	    color: #aaa;
	}
	
	.label{
		width: 120px;
	}
	.round-sm{
		border-radius: 5px;
	}
	.cu-form-group {
	    background-color: transparent;
	    padding: 0.5px 16px;
	    display: flex;
	    align-items: center;
	    min-height: 55px;
	    justify-content: space-between;
	    border: 0px;
	}
	.cu-form-group uni-picker .picker {
	    color: #fff;
	}
	
	/* .pupop .popup-box {
	    background: #ff0000 !important;
	} */
</style>
